<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 页面加载事件
        // onload 等页面内容全部加载完毕 包括页面dom元素 图片 flash css 等等
        // DOMContentLoaded 是DOM 加载完毕 不包括图片 falsh css 等就可以执行 加载速度比 onload更快一些
        // 1） onload 页面加载完毕事件
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('123');
            });
        }
        window.addEventListener('load', function() {
            alert('123');
        });

        // 2） DOMContentLoaded 窗口加载事件
        // DOMContentLoaded 事件触发时，仅当DOM加载完成后，不包括样式表，图片，flash等等
        // IE9+ 
        // 如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded事件比较合适
        document.addEventListener('DOMContentLoaded', function() {
            alert('6666');
        });

        // 2. 调整窗口大小的事件 onresize
        // onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
        window.addEventListener('resize', function() {
            // window.innerWidth 当前屏幕宽度
            console.log(window.innerWidth);
        });
    </script>
</head>

<body>
    <button>点击</button>
    <img src="BOM概述.png" alt=""><br>
    <img src="BOM的构成.png" alt=""><br>
    <img src="BOM构成1.png" alt="">
</body>

</html>